<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <style>
        .goods span{
            display: block;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>



</body>
<script>    
    var tbody = document.querySelector("#cartTable tbody");

    // 请求数据并渲染
    let xhr = new XMLHttpRequest(); // 0

    xhr.open("get", "../data/shoppingCar.json", true); // 1

    xhr.send();  // 1

    xhr.onreadystatechange = function () {
        // 2 3 4
        // console.log("xhr.readyState改变了", xhr.readyState);
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = xhr.responseText;
            var data = JSON.parse(res);
            console.log("data",data);


            // 注意:
            // 模板字符串中 ${}不仅可以接收变量 =>将变量拼接到字符串中, 也开始接收js表达式(元素符 和 操作数(变量,常量)) 组成的式子

            var html = "";
            data.forEach(({goodsId,goodsName,goodsImg,goodsPrice,buyNum})=>{
                html +=` <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                    <td class="price">${goodsPrice}</td>
                    <td class="count"><span class="reduce">${ buyNum > 1 ? "-" : "" }</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(goodsPrice * buyNum).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
            })
            tbody.innerHTML = html;  // 动态生成
        }
    }


    // 问题: ajax请求时异步的, 浏览器不会等待ajax请求结束,而是先把异步任务放到 WebAPI中, 监听xhr.readyState的改变, 与此同时同步代码继续向后执行 => 此时ajax数据还未请求到 => 商品数据也未生产  => 此时,获取动态生成的元素绑定事件时 => 集合为[] => 没有给任何一个元素绑定事件

    // 解决方法: 
    // 1. 老赖行为 =>  等ajax请求完毕 数据动态生成之后  在获取元素和绑定事件

    // 2. 用事件委托绑定事件 =>   通过事件冒泡的原理,将子代元素的事件委托给父元素(必须时页面中已存在的),由父元素代为执行  => 无论是父元素中原本的内容,还是未来生成的内容,都属于父元素, 点击时都会向父(代)元素冒泡


    var checkAll = document.getElementsByClassName("check-all")[0];  // 单元素
    var checkOneList = document.getElementsByClassName("check-one");  // 多元素
    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");
    var delList = document.getElementsByClassName("delete");
    var deleteAll = document.getElementById("deleteAll");
    var selectedTotal = document.getElementById("selectedTotal");
    var priceTotal = document.getElementById("priceTotal");

    // 事件委托:只是通过事件冒泡的原理将子代元素的事件委托给父元素,由父元素代为值 => 该获取的元素还是要获取  
    // 事件委托 => 可以给未来生成的元素绑定事件


    var catbox = document.getElementsByClassName("catbox")[0];

    catbox.addEventListener("click", shoppingCarHandler);

    function shoppingCarHandler(e) {
        // this -> 绑定事件的元素(catbox)
        // target -> 事件源(触发事件的元素)
        var e = e || window.event;
        var target = e.target;
        // console.log(target);
        if (target.classList.contains("check-all")) {
            console.log("点击了全选");
            // 所有的单选跟随全选的状态
            checkAllHandler.call(target);
            getTotal();
        } else if (target.classList.contains("check-one")) {
            console.log("点击了单选");
            isAllChecked();
            getTotal();
        } else if (target.classList.contains("add")) {
            console.log("点击了+");
            addHandler.call(target);
            getTotal();
        } else if (target.classList.contains("reduce")) {
            console.log("点击了-");
            reduceHandler.call(target);
            getTotal();
        } else if (target.classList.contains("delete")) {
            console.log("点击了单删");
            deleteOneHandler.call(target);
            getTotal();
        } else if (target.id === "deleteAll") {
            console.log("点击了全删");
            deleteAllHandler.call(target);
            getTotal();
        }
       
    }

    function checkAllHandler() {
        var status = this.checked;
        Array.from(checkOneList).forEach(checkOne => checkOne.checked = status)
    }

    function addHandler() {
        console.log("加号被点击", this);

        // a. 输入框  数量 加一 
        var countInput = this.previousElementSibling;
        console.log(countInput);

        var num = countInput.value; // num = "1"   取值
        num++; // 自增
        countInput.value = num; // 赋值(更新到页面)

        // b. 小计更新  =  单价*数量
        // 数量 => num
        // 单价 => 

        var parentTd = this.parentElement;
        var priceTd = parentTd.previousElementSibling;
        var subtotalTd = parentTd.nextElementSibling;

        // "¥5999"  "5999元" => 如果有单位 需要进一步处理
        var price = priceTd.textContent;
        var subtotal = price * num;

        subtotalTd.textContent = subtotal.toFixed(2);


        // c. 减号按钮的 “-”  出现
        var reduce = countInput.previousElementSibling;
        reduce.textContent = "-";
    }

    function reduceHandler() {
        console.log("减号被点击", this);
        // a. 输入框  数量 减一 
        var countInput = next(this);
        var num = countInput.value;

        // c. 减之前判断 如果num == 1 不能减
        if (num == 1) return false;

        num--; // 自减

        // d. 减之后判断 如果 num == 1 (2切1) 减号按钮的 "-" 消失
        if (num == 1) {
            this.textContent = "";
        }

        countInput.value = num;

        // b. 小计更新  =  单价*数量
        // 数量 => num
        // 单价 => 

        var parentTd = parent(this);
        var priceTd = prev(parentTd);
        var subtotalTd = next(parentTd);

        var price = priceTd.textContent;
        var subtotal = price * num;
        subtotalTd.textContent = subtotal.toFixed(2);
    }

    function deleteOneHandler() {
        console.log("点击单删", this);

        if (confirm("是否删除商品?")) {
            // var tr = this.parentElement.parentElement;
            var tr = parent(parent(this));
            tr.remove();

            // 每次删除之后,剩余的商品可能全都被选中 此时也可以反选 => 也需要判断是否反选
            isAllChecked();


        }
    }

    function deleteAllHandler(){
        // 删除所有选中状态的商品
        for (var j = 0; j < checkOneList.length; j++) { // 假设 j=1时 checkOne被选中
            var checkOne = checkOneList[j];
            if (checkOne.checked) {
                var tr = parent(parent(checkOne));
                tr.remove();
                j--;  //  j-- => j=0  本次循环结束  j++ => j = 1  下次还从当前位置判断
            }
        }

        isAllChecked();
    }


    function isAllChecked() {
        // every版  => 判断是否都选中
        var flag = Array.from(checkOneList).every(function (item) {
            return item.checked == true;
        })
        checkAll.checked = checkOneList.length > 0 ? flag : false;
    }


    // 结算=> 找到所有选中状态的checkOne => 对应找到商品的数量和小计 => 累加
    function getTotal() {
        var sum = 0; // 商品数量之和
        var allPrice = 0; // 商品的合计
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j];
            if (checkOne.checked) {  // 如果checkOne被选中  

                // 对应找到商品的数量和小计 
                var tr = parent(parent(checkOne));
                var countInput = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];

                var num = countInput.value * 1;
                var subtotal = subtotalTd.textContent * 1;

                sum += num;
                allPrice += subtotal;

            }
        }
        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);
    }

    function parent(ele) {
        return ele.parentElement;
    }

    function prev(ele) {
        return ele.previousElementSibling;
    }

    function next(ele) {
        return ele.nextElementSibling;
    }



</script>

</html>